<template>
  <h1>1.组件的基本写法</h1>
  <h1>姓：{{firstName}},名：{{lastName}} --- 姓名是：{{name}}</h1>
</template>

<script lang="ts">
import {defineComponent} from "vue"
export default defineComponent({
  name: "About",
})
</script>


<script lang="ts" setup>
/* 
  设置一个只读的计算属性,使用computed方法 接受一个回调函数作为参数
  computed方法返回一个ref对象,模板中直接使用,setup中要加value

*/
import {ref , computed} from "vue"
let firstName = ref("刘")
let lastName = ref("二")

let name = computed(()=>{
  return firstName.value + lastName.value
})



</script>

<style scoped>
</style>